@import (reference) "./common.less";

.status-bar {
    .box-shadow-up;

    color: @text-color;
    background-color: @background-color;
    height: 2.8em;
    position: relative;
    width: 100%;

    /* `status-bar-inner` is used for performance reasons,
        to move the status bar to its own layer. This keeps changes
        from the status-bar layer from cause a repaint in the entire editor */
    .status-bar-inner {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;

        display: flex;
        flex-direction: horizontal;
        align-items: center;

        .status-bar-container {
            flex: 1 1 auto;
            display: flex;
            flex-direction: horizontal;
            height: 100%;

            &.left {
                justify-content: flex-start;
            }

            &.center {
                justify-content: center;
            }

            &.right {
                justify-content: flex-end;
            }

            .status-bar-item {
                padding-left: 8px;
                padding-right: 8px;
                flex: 0 1 auto;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                &:hover {
                    background-color: rgba(100, 100, 100, 0.2);
                }

                &.filler {
                    flex: 1 1 auto;
                }

                .faded {
                    color: rgb(150, 150, 150);
                }
            }
        }
    }
}
